<template>
    <div class="full flex justify-center align-center">
        <div class="loginBox radius-xll border-white-x flex justify-between align-center boxshadow">
            <div class="maxfill hfill padding-x flex justify-center align-center">
                <img class="logoimg" src="@/assets/images/7186483c.png">
            </div>
            <div class="line-y"></div>
            <div class="formBox minfill hfill padding-x">
                <div class="padding-top-xl flex justify-center align-center"><img src="@/assets/images/logo.png"></div>
                <div class="formCore flex justify-center align-end">
                    <a-form :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }"
                        autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                        <a-form-item label="账号：" name="username" :rules="[{ required: true, message: '请输入登录账号!' }]">
                            <a-input v-model:value="formState.username" />
                        </a-form-item>

                        <a-form-item label="密码：" name="password" :rules="[{ required: true, message: '请输入登录密码!' }]">
                            <a-input-password v-model:value="formState.password" />
                        </a-form-item>

                        <a-form-item name="remember" :wrapper-col="{ offset: 4, span: 20 }">
                            <a-checkbox v-model:checked="formState.remember">
                                <template #label="{ label }">
                                    <span style="color: red"> {{ label }}</span>
                                </template>
                            </a-checkbox>
                        </a-form-item>

                        <a-form-item :wrapper-col="{ offset: 4, span: 20 }">
                            <a-button type="primary" html-type="submit" shape="default"
                                :icon="h(StarTwoTone)">立即登录</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { h, reactive } from "vue";
import { useStore } from 'vuex';
import { StarTwoTone } from '@ant-design/icons-vue';
const store = useStore();
const test = () => {
    store.commit("setLoadingStatus", true);
    setTimeout(() => {
        store.commit("setLoadingStatus", false);
    }, 3000);
}

const formState = reactive({
    username: '',
    password: '',
    remember: true,
});
const onFinish = values => {
    console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};

const appLogin = () => {
    Cookies.set('access', 'AAAAAA');
}
</script>
<style lang="scss" scoped>
.loginBox {
    width: 824px;
    height: 450px;
    border: 2px solid var(--white);
    border: 2px solid;
    border-image: linear-gradient(to right, rgb(172, 0, 206), #0f0, rgb(0, 217, 255)) 1;
    border-radius: 20px !important;

    .logoimg {
        height: 300px;
    }

    .formBox {
        width: 350px;

        img {
            height: 70px;
        }

        .formCore {
            height: calc(100% - 100px);
        }
    }
}
</style>